"use client";

/**
 * css封装
 */
function Button({ title, link}){
  return (
    <a className={'btn btn-success duration-1000'} href={link}>
      {title}
    </a>
  )
}

export default function Page(){

  const buttonList = [
    {
      title: 'Router',
      link: 'http://localhost:8080'
    },
    {
      title: 'Tailwind',
      link: 'http://localhost:8080'
    },
    {
      title: 'Zustand',
      link: 'http://localhost:8080'
    },
    {
      title: 'Reacts',
      link: 'http://localhost:8080'
    }
  ]

  return (
    <div className={'bg-slate-200 w-fit mx-auto p-5 mt-10 flex gap-x-3'}>
      {
        buttonList.map((button, index) => (
          <Button key={index} title={button.title} link={button.link}/>

        ))
      }
    </div>
  )
}
